<template><!--线下培训日程表-->
    <div style="height: 100%">
        <navbar :title="$t('cos_class_lesson')"></navbar>
        <div class="content-noBottom" style="overflow: auto">
            <div v-for="(item, index) in list" :key="index" class="schedule-content bottom-shadow">
                <div>
                    <div style="padding: 12px 15px;">
                        <div class="schedule-nav">{{item.ilsTitle}}</div>
                        <div class="schedule-title">{{ $t("cos_training_period") }}：{{ item.ilsStartTime | substringTime }} - {{ TimeSubstring(item.ilsEndTime) }}</div><!--培训时间-->
                        <div class="schedule-title">{{ $t("cos_train_address") }}：{{ item.ilsPlace ? item.ilsPlace : '--' }}</div><!--培训地点-->
                    </div>
                    <div class="schedule-time" style="background: #FAFAFB;padding: 15px" v-if="item.ilsQiandao == 1">
                        <div class="schedule-time-title">
                          <!-- {{item.ilsQiandaoYouxiaoqiTime.split(' ')}} -->
                            <!-- <div>{{ $t("cos_check_in_time") }}：{{ item.ilsQiandaoYouxiaoqiTime.split(' ')[1].replace(':00', '') }} - {{item.ilsEndTime.split(' ')[1].replace(':00', '')}}</div> -->
                            <!--签到时间-->
                            <div>{{ $t("cos_my_check_in_status") }}：{{ ( !item.isSign) ? '--' : (item.isSign == 1 ? $t('cos_check_in_status_normal') : (item.isSign == 2 ? $t('cos_check_in_status_be_late') : $t('cos_check_in_status_absence'))) }}</div>
                            <!--我的签到状态-->
                        </div>
                        <router-link v-if="!item.aeItmLessQD && $store.state.config.plus" tag="div" :to="`/barcodeScan?type=${type}`"  class="schedule-time-btn" >{{ $t("cos_check_in") }}</router-link><!--签到-->
                       <div class="schedule-time-btn" style="background: #999999;" v-if="$store.state.config.plus && item.ilsSignStatus">{{ $t("cos_checked_in") }}</div>
                    </div>
                    <ul style="padding: 15px;" v-if="item.itiEntId">
                        <li class="schedule-img" @click="instorJump(item.itiEntId)">
                            <div class="schedule-img-userPhoto">
                                <img :src="`${appUrl}${item.itiImg}`" alt="">
                            </div>
                            <div class="schedule-img-title">
                                <div>{{item.itiName}}</div>
                                <div>{{ item.ilsLecturerType == 'IN' ? $t('instructor_source_internal') : $t('instructor_source_External') }}</div><!--内部讲师/外部讲师-->
                            </div>
                        </li>
                    </ul>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
export default {
    name: 'Schedule',
    data() {
        return {
            list: [],
            barcode: null,
            type: this.$route.query.type
        };
    },
    methods: {
        TimeSubstring(time) {
            this.newTime = time.split(' ')[1];
            this.newTimeAng = this.newTime.substring(0, this.newTime.indexOf(':', this.newTime.indexOf(':') + 1));
            return this.newTimeAng;
        },
        instorJump(id) { //跳转到详情页
            // let instructorId = this.wbEncryptor(id);
            this.$router.push({path: '/instructorDetail', query: {id}});
        }
    },
    created() {
        this.$axios({
            method: 'GET',
            url: `/app/api/trainee/course/lesson/${this.$route.params.itmId}`
        }).then(res => {
            this.list = res.data;
        });
    }
};
</script>

<style scoped lang="less">
    .schedule-content{
        margin: 12px 15px;
        background: #ffffff;
        border-radius: 4px;
        .schedule-nav{
            font-size: 16px;
            margin-bottom: 12px;
        }
        .schedule-title{
            font-size: 12px;
            color: #999999;
        }
        .schedule-time{
            display: flex;
            justify-content: space-between;
            .schedule-time-title{
                div:first-child{
                    font-size: 14px;
                }
                div:last-child{
                    font-size: 12px;
                }
            }
            .schedule-time-btn{
                height: 24px;
                color: #ffffff;
                text-align: center;
                line-height: 24px;
                width: 63px;
                background: #5084EC;
            }
        }
        ul{
            overflow: auto;
            display: flex;
        }
        .schedule-img{
            margin-right: 30px;
            .schedule-img-userPhoto{
                width: 50px;
                height: 40px;
                text-align: center;
                img {
                    width: 40px;
                    height: 40px;
                    border-radius: 50%;
                }
            }
            .schedule-img-title{
                width: 50px;
                text-align: center;
                font-size: 12px;
                div:first-child{
                    text-overflow:ellipsis;
                    white-space: nowrap;
                    overflow: hidden;
                }
                div:last-child{
                    color: #999999;
                }
            }
        }
    }
</style>
